<template>
	<view class="my">
		<!-- 小程序顶部状态栏  兼容流海屏-->
		<!-- #ifdef MP -->
		<view :style="{ height: mpbarheight + 'px', backgroundColor: '#ffdb28' }"></view>
		<!-- #endif -->
		<!-- #ifdef APP-PLUS -->
		<view class="status_bar" style="background-color: #ffdb28;"><view class="top_view" style="background-color: #ffdb28;"></view></view>
		<!-- #endif -->
		<view class="bg"></view>
		<view class="my_main">
			<view style="padding-top: 38rpx;">
				<view class="usertop">
					<view class="top_userinfo">
						<view class="info_left">
							<u-upload
								class="uploadbtn"
								:action="action"
								:show-upload-list="false"
								:index="1"
								@on-error="uploaderr"
								@on-success="doupland"
								:max-count="5"
								:show-progress="false"
								:deletable="false"
								:max-size="5 * 1024 * 1024"
								:custom-btn="true"
								:limitType="['png', 'jpg', 'jpeg', 'webp']"
							>
								<view slot="addBtn" class="slot-btn" hover-class="slot-btn__hover" hover-stay-time="150">
									<u-avatar :src="userinfo.avatarurl" :size="130"></u-avatar>
								</view>
							</u-upload>
							<view class="userinfo">
								<text class="username u-p-b-16">{{ userinfo.username }}</text>
								<text class="timer">{{ userinfo.team }}</text>
							</view>
						</view>
						<!-- <view class="info_right"><u-icon color="#DFDFDF" :size="48" name="setting"></u-icon></view> -->
					</view>
					<view class="top_goodsinfo">
						<view class="goodsinfo">
							<view class="info_left">
								<text class="yesprice">昨日预估：￥{{ userinfo.zr_preServiceFee }}</text>
							</view>
							<view class="info_right">
								<text class="yesprice">昨日结算：￥{{ userinfo.cmServiceFee }}</text>
							</view>
						</view>
					</view>
					<view class="pricelist">
						<u-cell-group>
							<u-cell-item title="本月预估" @click="godata(1)">
								<view class="" slot="right-icon">
									<text class="u-p-r-20" style="color: #D0C37E;">￥{{ userinfo.month_preServiceFee }}</text>
								</view>
							</u-cell-item>
							<u-cell-item title="本月结算" @click="godata(2)">
								<view class="" slot="right-icon">
									<text class="u-p-r-20" style="color: #D0C37E;">￥{{ userinfo.month_cmServiceFee }}</text>
								</view>
							</u-cell-item>
							<u-cell-item title="上月预估" @click="godata(3)">
								<view class="" slot="right-icon">
									<text class="u-p-r-20" style="color: #D0C37E;">￥{{ userinfo.top_month_preServiceFee }}</text>
								</view>
							</u-cell-item>
							<u-cell-item title="上月结算" @click="godata(4)">
								<view class="" slot="right-icon">
									<text class="u-p-r-20" style="color: #D0C37E;">￥{{ userinfo.top_month_cmServiceFee }}</text>
								</view>
							</u-cell-item>
						</u-cell-group>
					</view>
				</view>
			</view>
			<view class="rebate" @click="gofanli">
				<view class="butie">
					<view class="">￥{{ nowyugu }}</view>
					<view class="" style="color: #BABDC1;">本月预估补贴</view>
				</view>
				<view class="butie">
					<view class="">￥{{ lastjiesuan }}</view>
					<view class="" style="color: #BABDC1;">上月结算补贴</view>
				</view>
				<u-icon name="arrow-right" color="#969799" size="28"></u-icon>
			</view>
			<view class="branch">
				<u-grid :col="4" :border="false" @click="gridgo">
					<u-grid-item v-for="(item, index) in classList" :key="index" :index="index">
						<view class="t-icon" :class="item.icon" style="width: 80rpx;height: 80rpx;"></view>
						<view class="grid-text" style="font-size: 24rpx; color: #787882;">{{ item.title }}</view>
					</u-grid-item>
				</u-grid>
			</view>
			<view class="dologinout"><u-button type="info" :custom-style="btnsty" @click="dologinout">退出登录</u-button></view>
		</view>
	</view>
</template>

<script>
export default {
	name: 'haha',
	data() {
		return {
			nowyugu: 0,
			lastjiesuan:0,
			action: 'https://app.letuilm.com/api/upload', //file
			btnsty: {
				height: '88rpx',
				borderRadius: '16rpx',
				color: '#F77F7F',
				borderColor: '#FDBABA',
				fontSize: '36rpx',
				backgroundColor: '#FFFFFF'
			},
			classList: [
				{
					icon: 'custom-t-icon-shangpinbangdianji',
					title: '商品管理'
				},
				{
					icon: 'custom-t-icon-luru',
					title: '招商管理'
				},
				{
					icon: 'custom-t-icon-zhishi',
					title: '知识库'
				},
				{
					icon: 'custom-t-icon-lizi',
					title: '案例库'
				},
				{
					icon: 'custom-t-icon-yongjin',
					title: '出单详情'
				}
			],
			mpbarheight: this.statusBarHeight,
			userinfo: {
				// avatarurl:
				// 	'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1600232902890&di=be229b4d6710caa3413c0e2b586d4b08&imgtype=0&src=http%3A%2F%2Fpics2.baidu.com%2Ffeed%2Fbd315c6034a85edf81702f204ba7a225dc54752a.jpeg%3Ftoken%3D40ea367f6b2ef995eaa6f5faf705a7d4',
				avatarurl: uni.getStorageSync('userinfo').img ? uni.getStorageSync('userinfo').img : null,
				username: uni.getStorageSync('userinfo').user ? uni.getStorageSync('userinfo').user : null,
				team: uni.getStorageSync('userinfo').bra_name ? uni.getStorageSync('userinfo').bra_name : null,
				time: uni.getStorageSync('userinfo').useTime ? uni.getStorageSync('userinfo').useTime : null,
				zr_preServiceFee: '0.00', //昨日预估服务费
				cmServiceFee: '0.00', //昨日结算服务费
				month_preServiceFee: '0.00', //本月预估服务费
				month_cmServiceFee: '0.00', //本月结算服务费
				top_month_preServiceFee: '0.00', //上月预估服务费
				top_month_cmServiceFee: '0.00' //上月结算服务费
			}
		};
	},
	//实例创建完成后被立即调用
	created() {},
	onLoad(option) {
		// #ifdef APP-PLUS || H5
		var loginRes = this.checkLogin('/pages/index/index', '2');
		if (!loginRes) {
			return false;
		}
		// #endif
		this.getpersonalservice();
		let nowmoth = this.currentMonth();
		let lastmoth = this.currentMonth2();
		this.getsearchuserdata(nowmoth[0] / 1000, nowmoth[1] / 1000,1); //本月
		this.getsearchuserdata(lastmoth[0] / 1000, lastmoth[1] / 1000,2); //上月
	},
	//挂载开始之前被调用
	beforeMount() {},
	//初次渲染完成
	onReady() {},
	//全局只触发一次
	onLaunch() {},
	//从后台进入前台
	onShow() {
		// console.log(this.$mp.page.route);
		uni.setStorageSync('routeurl', 'my');
	},
	//前台进入后台
	onHide() {},
	methods: {
	currentMonth() {
			var date = new Date();
			var year = date.getFullYear();
			var year2 = 0;
			var month = date.getMonth() + 1;
			// 本月第一天日期
			var begin = new Date(year + '-' + month + '-01 00:00:00').getTime();
			// 本月最后一天日期
			var month2 = 0;
			if (month + 2 > 12) {
				month2 = 1;
				year2 = year + 1;
			} else {
				month2 = month + 1;
				year2 = year;
			}
			// var year2 = month2 == 1 ? year + 1 : year;
			var end = new Date(year2 + '-' + month2 + '-01 00:00:00').getTime() - 1000;
			return [begin, end];
		},
		currentMonth2() {
			var date = new Date();
			var year = date.getFullYear();
			var year2 = 0;
			var month = date.getMonth();
			// 本月第一天日期
			var begin = new Date(year + '-' + month + '-01 00:00:00').getTime();
			// 本月最后一天日期
			var month2 = 0;
			if (month + 2 > 12) {
				month2 = 1;
				year2 = year + 1;
			} else {
				month2 = month + 1;
				year2 = year;
			}
			// var year2 = month2 == 1 ? year + 1 : year;
			var end = new Date(year2 + '-' + month2 + '-01 00:00:00').getTime() - 1000;
			return [begin, end];
		},
		getsearchuserdata(start, end, val) {
			this.$u.api
				.getsearchuserdata({
					start: start,
					end: end
				})
				.then(res => {
					console.log(res);
					if (val === 1) {
						uni.setStorageSync('nowmonth', res.data);
						this.nowyugu = res.data.pubSharePreFee;
						// this.nowjiesuan = res.data.pubShareFee;
					} else {
						uni.setStorageSync('lastmonth', res.data);
						// this.lastyugu = res.data.pubSharePreFee;
						this.lastjiesuan = res.data.pubShareFee;
					}
				});
		},
		uploaderr(res, index, lists, name) {
			console.log('上传错误返回', res, index, lists, name);
		},
		doupland(data, index, lists, name) {
			console.log('上传成功返回', data, index, lists, name);
			if (data.code == 200) {
				let url = `//` + data.data.url;
				this.userinfo.avatarurl = url;
				let _userInfo = uni.getStorageSync('userinfo');
				_userInfo.img = url;
				uni.setStorageSync('userinfo', _userInfo);
				this.updateuserimg(url);
			}
		},
		updateuserimg(url) {
			this.$u.api
				.updateuserimg({
					img: url
				})
				.then(res => {
					console.log('设置成功', res);
				})
				.catch(err => {
					console.log(err);
				});
		},
		getpersonalservice() {
			this.$u.api
				.getpersonalservice()
				.then(res => {
					console.log(res);
					if (res.code == 200) {
						this.userinfo.zr_preServiceFee = res.data.zr_preServiceFee; //昨日预估服务费
						this.userinfo.cmServiceFee = res.data.cmServiceFee; //昨日结算服务费
						this.userinfo.month_preServiceFee = res.data.month_preServiceFee; //本月预估服务费
						this.userinfo.month_cmServiceFee = res.data.month_cmServiceFee; //本月结算服务费
						this.userinfo.top_month_preServiceFee = res.data.top_month_preServiceFee; //上月预估服务费
						this.userinfo.top_month_cmServiceFee = res.data.top_month_cmServiceFee; //上月结算服务费
					}
				})
				.catch(err => {
					console.log(err);
				});
		},
		gridgo(index) {
			// console.log(index);
			switch (index) {
				case 0:
					uni.navigateTo({
						url: '/pages/rungoods/rungoods'
					});
					break;
				case 1:
					uni.navigateTo({
						url: '/pages/managegoods/managegoods'
					});
					break;
				case 2:
					uni.navigateTo({
						url: '/pages/knowledge/problem'
					});
					break;
				case 3:
					uni.navigateTo({
						url: '/pages/case/case'
					});
					break;
				case 4:
					uni.navigateTo({
						url: '/pages/issuing/issuing'
					});
					break;
			}
		},
		godata(index) {
			// console.log(index);
			uni.navigateTo({
				url: '/pages/userdata/userdata?index=' + index
			});
		},
		gofanli() {
			uni.navigateTo({
				url: '/pages/subsidyinfo/subsidyinfo'
			});
		},
		dologinout() {
			uni.clearStorage();
			uni.reLaunch({
				url: '/pages/login/login'
			});
		}
	}
};
</script>

<style lang="scss" scoped>
.my {
	min-height: calc(100vh - 100rpx);
	/* #ifndef H5 */
	min-height: 100vh;
	/* #endif */
	background-color: #f4f4f4;
	overflow-y: auto;
	position: relative;
	.bg {
		position: absolute;
		// top: var(--status-bar-height);
		left: 0;
		width: 100%;
		height: 248rpx;
		background-color: #ffdb28;
		z-index: 0;
	}
	.my_main {
		position: absolute;
		left: 0;
		width: 100%;
		.usertop {
			width: 680rpx;
			// height: 300rpx;
			// background-color: #292930;
			margin: 0 auto;
			border-radius: 18rpx;
			// z-index: 2;
			.top_userinfo {
				height: 166rpx;
				box-sizing: border-box;
				padding: 0rpx 38rpx 36rpx 42rpx;
				display: flex;
				justify-content: space-between;
				align-items: center;
				// background-color: #ffffff;
				border-radius: 16rpx;
				.info_left {
					display: flex;
					justify-content: space-between;
					align-items: center;
					.userinfo {
						// width: 112rpx;
						margin-left: 32rpx;
						display: flex;
						flex-wrap: wrap;
						.username {
							color: rgba(16, 16, 16, 1);
							font-size: 36rpx;
						}
						.timer {
							display: block;
							width: 100%;
							font-size: 24rpx;
						}
					}
				}
			}
			.top_goodsinfo {
				z-index: 3;
				background-color: #ffffff;
				border-top-left-radius: 16rpx;
				border-top-right-radius: 16rpx;
				.goodsinfo {
					padding: 42rpx 36rpx 42rpx 36rpx;
					border-radius: 16rpx;
					background-color: #292930;
					display: flex;
					justify-content: space-between;
					align-items: center;
					.info_left {
						color: rgba(208, 195, 126, 1);
						font-size: 28rpx;
					}
					.info_right {
						color: rgba(208, 195, 126, 1);
						font-size: 28rpx;
						display: flex;
						align-items: center;
						.time {
							margin-right: 10rpx;
						}
					}
				}
			}
		}
		.pricelist::v-deep {
			background-color: #ffffff;
			// margin-top: -20rpx;
			.u-cell {
				padding: 7px 16px;
			}
		}
		.branch {
			width: 680rpx;
			// height: 182rpx;
			margin: 0 auto;
			margin-top: 38rpx;
			border-radius: 16rpx;
			overflow: hidden;
			background-color: #ffffff;
		}
		.dologinout {
			width: 680rpx;
			margin: 82rpx auto 40rpx auto;
		}
		.rebate {
			width: 680rpx;
			padding: 30rpx;
			margin: 26rpx auto 0 auto;
			border-radius: 16rpx;
			background-color: #ffffff;
			display: flex;
			justify-content: space-between;
			align-items: center;
		}
	}
}
</style>
